<script>
import NavbarToggler from "../components/NavbarToggleButton.vue";
import FloatBtn from "../components/FloatBtn.vue";
import SideRecommend from "../components/SideRecommend.vue";
import VTitle from "../components/VTitle.vue";
import courseBase from "../assets/json/CourseBase.json";
import docBase from "../assets/json/DocBase.json"
import {getResourceURL} from "../axiosConfig";

export default {
  props: {
    target: {
      type: [String, Number],
      default: '',
      description: "Button target element"
    },
    toggled: {
      type: Boolean,
      default: false,
      description: "Whether button is toggled"
    }
  },
  components: {
    VTitle,
    SideRecommend,
    FloatBtn,
    NavbarToggler,
  },
  methods: {
    getSvgImage(description, color) {
      // 根据描述和颜色生成对应的SVG图片
      if(color==="ppt"){
        color = "#BD3718";
      } else if(color==="pdf"){
        color = "#B30B00";
      } else if(color==="doc"){
        color = "#134EB3";
      } else if(color==="xlsx") {
        color = "#0E753B";
      }
      const encodedDescription = encodeURIComponent(description);
      const encodedColor = encodeURIComponent(color);
      return `data:image/svg+xml,%3Csvg width='320' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EDrawing%3C/title%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Crect id='svg_3' height='191.07122' width='382.49958' y='-2.5001' x='-5.00017' stroke-width='0' stroke='%23000' fill='${encodedColor}'/%3E%3Ctext transform='matrix(1.28664 0 0 1.28664 -13.9226 -27.9567)' stroke='%23000' xml:space='preserve' text-anchor='start' font-family='Noto Sans JP' font-size='24' id='svg_2' y='97.37594' x='22.47896' stroke-width='0' fill='%23ffffff'%3E${encodedDescription}%3C/text%3E%3Crect id='svg_4' height='2.14285' width='23.21426' y='101.42836' x='113.21399' stroke-width='0' stroke='%23000' fill='${encodedColor}'/%3E%3C/g%3E%3C/svg%3E`;
    }
  },
  mounted() {
    if (this.$route.params.id === undefined) {
      // 如果没有传递id参数，则使用默认值
      this.url = this.$route.query.url
    } else {
    this.urlId = this.$route.params.id;
    // 现在你可以使用id来获取父组件传递的参数
    console.log("id: " + this.urlId);
    this.url = this.docItems[this.urlId].url;
    }

    this.srcAAA = 'https://view.officeapps.live.com/op/view.aspx?src=' + getResourceURL(this.url)
    console.log("srcAAA:" + this.srcAAA)
  },
  data() {
    return {
      variable: '',
      urlId:1, // 保存urlId为组件数据
      courseItems: courseBase,
      docItems: docBase,
      srcAAA: '',
      url:'',
    }
  },
  created() {

  }
};

</script>

<template>
  <div>
    <v-title>查看文档 - 思议在线学习平台</v-title>
    <float-btn/>
    <div class="row">
      <div class="col-12">
        <card>
          <div class="row">
            <span class="deco"></span>
            <h2 class="clearMargin">面向对象程序设计</h2>
          </div>
        </card>
      </div>
      <div class="col-lg-9">
        <card>
          <iframe id="iframe1" width="100%" height="780 px" frameborder='no' border='0' marginwidth='0' marginheight='0'
                  scrolling='no' allowtransparency='yes'
                  :src=srcAAA></iframe>
        </card>
      </div>
      <div class="col-lg-3">
        <side-recommend :items="courseItems" :category="'course'">
          <template v-slot:title>推荐课程</template>
        </side-recommend>
        <!--        <side-recommend>
                  <template v-slot:title>推荐练习</template>
                </side-recommend>-->
        <side-recommend :items="docItems" category="doc">
          <template v-slot:title>推荐课件</template>
        </side-recommend>
      </div>

    </div>
  </div>
</template>

<style scoped>
.col-lg-7 {
  position: relative;
}

.start-study {
  width: 10rem;
}

@media (max-width: 991px) {
  .col-lg-7 {
    padding-left: 2rem;
  }

  .start-study {
    width: 100%;
  }
}

.deco {
  margin: 0 1rem;
  height: 2.5rem;
  width: 5px;
  background-color: #1f86f6;
}
</style>
